import React, { Component } from 'react'
import { Tabs, Spin } from 'antd'
import moment from 'moment'

import request from '@/Utils/fecth'
import { address } from '@/Utils/apiConfig'
import { STATUS } from '@/Utils/CONST'
import { checkPermission } from '@/components/AuthComponent/utils'

import BlockchainBrowser from './components/BlockchainBrowser'
import Organization from './components/Organization'
import Channel from './components/Channel'
import Chaincode from './components/Chaincode'

import './index.less'

const { TabPane } = Tabs

export default class LeagueInfo extends Component {
  constructor(props) {
    super(props)
    const state = props.location.state || {}
    const tabsList = [
      {
        key: '1',
        authKey: 'fabric-browser',
        label: '区块链浏览器',
        comp: (props) => <BlockchainBrowser {...props} />,
      },
      {
        key: '2',
        label: '组织管理',
        authKey: 'fabric-org',
        comp: (props) => <Organization {...props} />,
      },
      {
        key: '3',
        label: '通道管理',
        authKey: 'fabric-channel',
        comp: (props) => <Channel {...props} />,
      },
      {
        key: '4',
        label: '链码管理',
        authKey: 'fabric-chaincode',
        comp: (props) => <Chaincode {...props} />,
      },
    ].filter(v => checkPermission(v.authKey))

    this.state = {
      activeKey: state.activeKey || (tabsList[0] || {}).key || '1',
      leagueInfo: {},
      loading: true,
      renderDom: tabsList,
    }
  }

  componentDidMount() {
    this.getLeagueInfo()
  }

  getLeagueInfo = async() => {
    const { id } = this.props.match.params
    const { status, data } = await request().get(address.leagueManagement.leagueInfo.format({ consortiumId: id }))
    this.setState({
      loading: false,
    })
    if (status === 200) {
      this.setState({
        leagueInfo: data || {},
      })
    }
  }

  changeFn = (activeKey) => {
    this.setState({
      activeKey,
    })
    const { location: { pathname }} = this.props
    this.props.history.replace({
      pathname,
      state: {
        activeKey,
      },
    })
  }

  render() {
    const { renderDom, activeKey, leagueInfo, loading } = this.state
    const commonProps = {
      leagueInfo,
      getLeagueInfo: this.getLeagueInfo,
    }
    return (
      <div className="league-page common">
        <Spin spinning={loading}>
          <div className="browser-overview">
            {
              overviewConf.map((v, i) => {
                return (
                  <div key={i} className="overview-item">
                    <span className="overview-label">{v.label}</span>
                    {v.render(leagueInfo, this)}
                  </div>
                )
              })
            }
          </div>
          <div className="league-tabs">
            <Tabs destroyInactiveTabPane activeKey={activeKey} onChange={this.changeFn}>
              {
                renderDom.map(element => {
                  const Component = element.comp
                  return (
                    <TabPane tab={element.label} key={element.key}>
                      {
                        activeKey === element.key &&
                        <Component {...commonProps} {...this.props} />
                      }
                    </TabPane>
                  )
                })
              }
            </Tabs>
          </div>
        </Spin>
        <div className="power">
          <div className="power-content">Powered by powerchain</div>
        </div>
      </div>
    )
  }
}

const overviewConf = [
  {
    label: '联盟名称',
    render: (obj) => obj.display_name || '-',
  },
  {
    label: '联盟域名',
    render: (obj) => obj.domain || '-',
  },
  // {
  //   label: '共识算法',
  //   render: (obj) => obj.consensus || '-'
  // },
  {
    label: '证书加密方式',
    render: (obj) => {
      return obj.isGuomi ? '国密算法（SM2）' : '椭圆曲线数字加密算法（ECDSA）'
    },
  },
  {
    label: '创建时间',
    render: (obj) => obj.createTime ? moment(obj.createTime).format('YYYY.MM.DD HH:mm:ss') : '-',
  },
  {
    label: '运行状态',
    render: (obj, self) => {
      const { leagueInfo } = self.state
      const statusType = leagueInfo.status === 'STOP' ? 'status' : 'userConsortiumStatus'
      return (STATUS[leagueInfo[statusType]] || {}).tooltip || (STATUS[leagueInfo.status] || {}).tooltip || ''
    },
  },
  {
    label: '版本号',
    render: () => '1.4.6',
  },
]

